* {
    box-sizing: border-box;
}

html, body, #app {
    height: 100%;
}

html {
    --font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
        'Droid Sans Fallback';
    --font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'HelveticaNeue-Light',
        'Ubuntu', 'Droid Sans', sans-serif;
    --default-border-radius: 3px;
    --label-margin-bottom: 0.25rem;
    /* theme colors */
    --default-border-color: lightgrey;
    --default-border-color-modal: var(--default-border-color);
    --border-color-lighter: #f1f1f1;
    --border-color-lighter-darkened: #f1f1f147;
    --base-color-success: #047857;
    --base-color-info: #097bed;
    --base-color-warning: #ffb400;
    --base-color-error: #b91c1c;
    --background-color: white;
    --background-color-lighter: #f1f1f1;
    --text-color: black;
    --caret-color: black;
    --scrollbar: #dfdfdf;
    --scrollbar-background: #f3f2f2;
    --link-color: rgb(0, 0, 238);
    --modal-link-color: var(--link-color);
    --input-disabled-background-color: rgba(239, 239, 239, 0.3);
    --input-disabled-color: rgb(84, 84, 84);
    --input-selection-background-color: #9cc3f5;
    --input-highlight-outline-color: #1a73e8;
    --input-border-color: var(--default-border-color);
    --input-disabled-border-color: var(--input-border-color);
    --button-background-color: white;
    --button-hover-background-color: #f8f8f8;
    --button-text-color: black;
    --button-border-color: #8c8c8c;
    --modal-background-color: white;
    --modal-footer-background-color: #fafafa;
    --modal-text-color: black;
    --modal-caret-color: black;
    --modal-border-color: lightgrey;
    --modal-scrollbar: #dfdfdf;
    --modal-scrollbar-background: #f3f2f2;
    --modal-button-background-color: white;
    --modal-button-hover-background-color: #f8f8f8;
    --modal-button-text-color: black;
    --modal-button-border-color: #8c8c8c;
    --modal-input-disabled-background-color: var(--input-disabled-background-color);
    --modal-input-disabled-color: var(--input-disabled-color);
    --modal-input-selection-background-color: var(--input-selection-background-color);
    --sidebar-item-active-color: #f3f3f3;
    --resizer-background-color: #f1f1f1;
    --response-panel-history-select-hover-color: #f7f7f7;
    --response-panel-loader-background-color: #29292969;
    --response-panel-loader-color: #292929;
    --github-button-icon-fill-color: black;
    --cm-string: #a11;
    --cm-boolean: #219;
    --cm-null: #708;
    --cm-number: #164;
    --cm-comment: #940;
    --cm-keyword: #708;
    --cm-variable: #00f;
    --cm-tooltip-background-color: #f5f5f5;
    --cm-selection-background-color: #00000021;
    --cm-selection-match-background-color: #99ff7780;
    --modal-cm-string: #a11;
    --modal-cm-boolean: #219;
    --modal-cm-null: #708;
    --modal-cm-number: #164;
    --modal-cm-comment: #940;
    --modal-cm-keyword: #708;
    --modal-cm-variable: #00f;
    --modal-cm-tooltip-background-color: #f5f5f5;
    --modal-cm-selection-background-color: #00000021;
    --modal-cm-selection-match-background-color: #99ff7780;
    --drop-target-background-color: #ffc0cb1f;
    --workspace-menu-hover-background-color: #dbedff;
    --method-get: #ab7aff;
    --method-post: #9ed06c;
    --method-put: #e17611;
    --method-delete: #d02141;
    --method-patch: #c49804;
    --method-options: #2bc2f0;
    --method-head: #267aba;
    --socket-header-background-color: #edf2f7;
    --socket-button-background-color: cadetblue;
    --socket-input-disabled-background-color: #fafbfd;
    --socket-green-row-background-color: #ddffb6;
    --valid-env-highlight-color: #2e7d32;
    --valid-env-highlight-background-color: #e8f5e9;
    --invalid-env-highlight-color: #d32f2f;
    --invalid-env-highlight-background-color: #ffebee;
    --modal-valid-env-highlight-color: #2e7d32;
    --modal-valid-env-highlight-background-color: #e8f5e9;
    --modal-invalid-env-highlight-color: #d32f2f;
    --modal-invalid-env-highlight-background-color: #ffebee;
    --box-shadow-color: rgba(0, 0, 0, 0.1);
    --tip-text-color: #7b7a7a;
    --modal-tip-text-color: var(--tip-text-color);
    --primary-text-color: white;
    --primary-background-color: #1a73e8;
    --primary-hover-background-color: rgba(26, 115, 232, 0.5);
    --menu-border-color: #82828240;
    --send-request-button-color: #7f4fd5;
    --send-request-button-hover-color: #673ab7;
}

html.theme-dark {
    --default-border-color: #484848;
    --default-border-color-modal: var(--default-border-color);
    --border-color-lighter: #484848;
    --border-color-lighter-darkened: #48484847;
    --base-color-success: #0bb27e;
    --base-color-info: #097bed;
    --base-color-warning: #ffb400;
    --base-color-error: #f06f57;
    --background-color: #292929;
    --text-color: #d9d9d9;
    --caret-color: var(--text-color);
    --scrollbar: #505050;
    --scrollbar-background: #353535;
    --link-color: #d9c9ff;
    --modal-link-color: var(--link-color);
    --input-disabled-background-color: rgba(59, 59, 59, 0.3);
    --input-disabled-color: rgb(170, 170, 170);
    --input-selection-background-color: #083ca6;
    --input-highlight-outline-color: #1a73e899;
    --input-border-color: var(--default-border-color);
    --input-disabled-border-color: var(--input-border-color);
    --modal-input-disabled-background-color: var(--input-disabled-background-color);
    --modal-input-disabled-color: var(--input-disabled-color);
    --modal-input-selection-background-color: var(--input-selection-background-color);
    --button-background-color: #292929;
    --button-hover-background-color: #595858;
    --button-text-color: var(--text-color);
    --button-border-color: #8c8c8c;
    --modal-background-color: var(--background-color);
    --modal-footer-background-color: #232323;
    --modal-text-color: var(--text-color);
    --modal-caret-color: var(--caret-color);
    --modal-border-color: var(--default-border-color-modal);
    --modal-scrollbar: var(--scrollbar);
    --modal-scrollbar-background: var(--background-color);
    --modal-button-background-color: var(--button-background-color);
    --modal-button-hover-background-color: var(--button-hover-background-color);
    --modal-button-text-color: var(--button-text-color);
    --modal-button-border-color: var(--button-border-color);
    --sidebar-item-active-color: #353535;
    --resizer-background-color: #353535;
    --response-panel-history-select-hover-color: #353535;
    --response-panel-loader-background-color: #29292969;
    --response-panel-loader-color: white;
    --github-button-icon-fill-color: white;
    --cm-string: #ff6464;
    --cm-boolean: #b0a4ff;
    --cm-null: #f190ff;
    --cm-number: #1cd58b;
    --cm-comment: #ee8735;
    --cm-keyword: #ca73d7;
    --cm-variable: #a7a7ff;
    --cm-tooltip-background-color: var(--background-color);
    --cm-selection-background-color: #ffffff33;
    --cm-selection-match-background-color: #99ff773d;
    --modal-cm-string: var(--cm-string);
    --modal-cm-boolean: var(--cm-boolean);
    --modal-cm-null: var(--cm-null);
    --modal-cm-number: var(--cm-number);
    --modal-cm-comment: var(--cm-comment);
    --modal-cm-keyword: var(--cm-keyword);
    --modal-cm-variable: var(--cm-variable);
    --modal-cm-tooltip-background-color: var(--cm-tooltip-background-color);
    --modal-cm-selection-background-color: var(--cm-selection-background-color);
    --modal-cm-selection-match-background-color: var(--cm-selection-match-background-color);
    --drop-target-background-color: #f8889b41;
    --workspace-menu-hover-background-color: #505050;
    --method-get: #ab7aff;
    --method-post: #9ed06c;
    --method-put: #e17611;
    --method-delete: #d02141;
    --method-patch: #fcca25;
    --method-options: #2bc2f0;
    --method-head: #267aba;
    --socket-header-background-color: var(--sidebar-item-active-color);
    --socket-button-background-color: #2c3f40;
    --socket-input-disabled-background-color: #2d2d2d;
    --socket-green-row-background-color: #88ff0017;
    --valid-env-highlight-color: #a5d6a7;
    --valid-env-highlight-background-color: #1b5e20;
    --invalid-env-highlight-color: #ffcccb;
    --invalid-env-highlight-background-color: #7c0404;
    --modal-valid-env-highlight-color: var(--valid-env-highlight-color);
    --modal-valid-env-highlight-background-color: var(--valid-env-highlight-background-color);
    --modal-invalid-env-highlight-color: var(--invalid-env-highlight-color);
    --modal-invalid-env-highlight-background-color: var(--invalid-env-highlight-background-color);
    --box-shadow-color: rgba(255, 255, 255, 0.1);
    --tip-text-color: #b1b1b1;
    --modal-tip-text-color: var(--tip-text-color);
    --primary-text-color: var(--text-color);
    --primary-background-color: #1a73e8;
    --primary-hover-background-color: rgba(26, 115, 232, 0.5);
    --menu-border-color: #48484880;
    --send-request-button-color: #7f4fd5;
    --send-request-button-hover-color: #673ab7;
}

html.theme-dracula {
    --default-border-color: #6272a4;
    --default-border-color-modal: var(--default-border-color);
    --border-color-lighter: #44475a;
    --border-color-lighter-darkened: #44475a47;
    --base-color-success: #50fa7b;
    --base-color-info: #8be9fd;
    --base-color-warning: #ffb86c;
    --base-color-error: #ff5555;
    --background-color: #282a36;
    --text-color: #f8f8f2;
    --caret-color: var(--text-color);
    --scrollbar: #6272a4;
    --scrollbar-background: #44475a;
    --link-color: #bd93f9;
    --modal-link-color: var(--link-color);
    --input-disabled-background-color: rgba(60, 60, 60, 0.3);
    --input-disabled-color: rgb(170, 170, 170);
    --input-selection-background-color: #44475a;
    --input-highlight-outline-color: #6272a4;
    --input-border-color: var(--default-border-color);
    --input-disabled-border-color: var(--input-border-color);
    --modal-input-disabled-background-color: var(--input-disabled-background-color);
    --modal-input-disabled-color: var(--input-disabled-color);
    --modal-input-selection-background-color: var(--input-selection-background-color);
    --button-background-color: #44475a;
    --button-hover-background-color: #6272a4;
    --button-text-color: #f8f8f2;
    --button-border-color: #bd93f9;
    --modal-background-color: var(--background-color);
    --modal-footer-background-color: #44475a;
    --modal-text-color: var(--text-color);
    --modal-caret-color: var(--caret-color);
    --modal-border-color: var(--default-border-color-modal);
    --modal-scrollbar: var(--scrollbar);
    --modal-scrollbar-background: var(--background-color);
    --modal-button-background-color: var(--button-background-color);
    --modal-button-hover-background-color: var(--button-hover-background-color);
    --modal-button-text-color: var(--button-text-color);
    --modal-button-border-color: var(--button-border-color);
    --sidebar-item-active-color: #44475a;
    --resizer-background-color: #44475a;
    --response-panel-history-select-hover-color: #44475a;
    --response-panel-loader-background-color: rgba(40, 42, 54, 0.69);
    --response-panel-loader-color: white;
    --github-button-icon-fill-color: white;
    --cm-string: #f1fa8c;
    --cm-boolean: #ffb86c;
    --cm-null: #8ca6f9;
    --cm-number: #bd93f9;
    --cm-comment: #6272a4;
    --cm-keyword: #ff79c6;
    --cm-variable: #50fa7b;
    --cm-tooltip-background-color: var(--background-color);
    --cm-selection-background-color: #6272a4;
    --cm-selection-match-background-color: #99ff7780;
    --modal-cm-string: var(--cm-string);
    --modal-cm-boolean: var(--cm-boolean);
    --modal-cm-null: var(--cm-null);
    --modal-cm-number: var(--cm-number);
    --modal-cm-comment: var(--cm-comment);
    --modal-cm-keyword: var(--cm-keyword);
    --modal-cm-variable: var(--cm-variable);
    --modal-cm-tooltip-background-color: var(--cm-tooltip-background-color);
    --modal-cm-selection-background-color: var(--cm-selection-background-color);
    --modal-cm-selection-match-background-color: var(--cm-selection-match-background-color);
    --drop-target-background-color: #ff79c61f;
    --workspace-menu-hover-background-color: #50fa7b33;
    --method-get: #50fa7b;
    --method-post: #ff79c6;
    --method-put: #bd93f9;
    --method-delete: #ff5555;
    --method-patch: #ffb86c;
    --method-options: #8be9fd;
    --method-head: #6272a4;
    --socket-header-background-color: #44475a;
    --socket-button-background-color: #6272a4;
    --socket-input-disabled-background-color: #44475a;
    --socket-green-row-background-color: #50fa7b33;
    --valid-env-highlight-color: #50fa7b;
    --valid-env-highlight-background-color: #0e6115;
    --invalid-env-highlight-color: #ffbebe;
    --invalid-env-highlight-background-color: #7c0404;
    --modal-valid-env-highlight-color: var(--valid-env-highlight-color);
    --modal-valid-env-highlight-background-color: var(--valid-env-highlight-background-color);
    --modal-invalid-env-highlight-color: var(--invalid-env-highlight-color);
    --modal-invalid-env-highlight-background-color: var(--invalid-env-highlight-background-color);
    --box-shadow-color: rgba(255, 255, 255, 0.1);
    --tip-text-color: #bd93f9;
    --modal-tip-text-color: var(--tip-text-color);
    --primary-text-color: var(--text-color);
    --primary-background-color: #ff79c6;
    --primary-hover-background-color: rgba(255, 121, 198, 0.5);
    --menu-border-color: #6272a47f;
    --send-request-button-color: #7f4fd5;
    --send-request-button-hover-color: #673ab7;
}

* {
    caret-color: var(--caret-color);
}

body {
    font-family: var(--font-default);
    font-size: 13px;
    background-color: var(--background-color);
    color: var(--text-color);
}

::-webkit-scrollbar {
    width: 9px;
    height: 5px;
    background-color: var(--scrollbar-background);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    height: 70%;
}

[class*='request-method--'] {
    font-weight: 600;
}

.request-method--GET, .request-method--SOCK {
    color: var(--method-get) !important;
}

.request-method--POST {
    color: var(--method-post) !important;
}

.request-method--GQL {
    color: var(--method-post) !important;
}

.request-method--PUT {
    color: var(--method-put) !important;
}

.request-method--PATCH {
    color: var(--method-patch) !important;
}

.request-method--DELETE {
    color: var(--method-delete) !important;
}

.request-method--OPTIONS {
    color: var(--method-options) !important;
}

.request-method--HEAD {
    color: var(--method-head) !important;
}

/* firefox fixes */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
    }
}

.code {
    display: inline-block;
    background-color: var(--modal-background-color);
    padding: 0.1rem 0.2rem;
    border: 1px solid var(--modal-border-color);
    font-family: var(--font-monospace);
    font-size: 0.9em;
}

input, textarea, select {
    background-color: inherit;
    color: inherit;
}

select option {
    background-color: var(--background-color);
    color: var(--text-color);
}

.modal select option {
    background-color: var(--modal-background-color);
    color: var(--modal-text-color);
}

input:disabled {
    background-color: var(--input-disabled-background-color);
    color: var(--input-disabled-color);
    border: 1px solid var(--input-disabled-border-color);
}

input.full-width-input,
select.full-width-input,
textarea.full-width-input {
    width: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: var(--default-border-radius);
    outline: 0;
    padding: 0.4rem;
    background: inherit;
}

input.full-width-input {
    padding: 0.5rem;
    background: var(--modal-background-color);
}

textarea.full-width-input {
   resize: vertical;
   min-height: 4rem;
}

.code-block {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 0.1rem;
    border: 1px solid var(--default-border-color);
    font-family: var(--font-monospace);
}

select.full-width-input option {
    background-color: var(--modal-background-color);
    color: var(--modal-text-color);
}

.full-width-input.slim {
    padding: 0.1rem;
}

.full-width-input:focus {
    outline: 1px solid var(--input-highlight-outline-color);
    border: 1px solid var(--input-highlight-outline-color);
}

.modal * {
    caret-color: var(--modal-caret-color);
}

button.button, input[type="file"]::file-selector-button {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    padding: 3px 10px;
    border-radius: 3px;
}

button.button:hover:not(:disabled), input[type="file"]::file-selector-button:hover {
    background-color: var(--button-hover-background-color);
    cursor: pointer;
}

button.button:disabled {
    opacity: 0.5;
}

.modal button.button, .pwa-toast button.button {
    background-color: var(--modal-button-background-color);
    color: var(--modal-button-text-color);
    border: 1px solid var(--modal-button-border-color);
}

.modal button.button:hover:not(:disabled), .pwa-toast button.button:hover {
    background-color: var(--modal-button-hover-background-color);
}

/* code mirror styles & overrides */

.cm-editor .cm-string:not(.cm-property) {
    color: var(--cm-string);
}

.cm-editor .cm-boolean {
    color: var(--cm-boolean);
}

.cm-editor .cm-null {
    color: var(--cm-null);
}

.cm-editor .cm-number {
    color: var(--cm-number);
}

.cm-editor .cm-comment {
    color: var(--cm-comment);
}

.cm-editor .cm-keyword {
    color: var(--cm-keyword);
}

.cm-editor .cm-variable {
    color: var(--cm-variable);
}

.cm-editor .cm-tooltip {
    background-color: var(--cm-tooltip-background-color);
}

.modal .cm-editor .cm-string:not(.cm-property) {
    color: var(--modal-cm-string);
}

.modal .cm-editor .cm-boolean {
    color: var(--modal-cm-boolean);
}

.modal .cm-editor .cm-null {
    color: var(--modal-cm-null);
}

.modal .cm-editor .cm-number {
    color: var(--modal-cm-number);
}

.modal .cm-editor .cm-comment {
    color: var(--modal-cm-comment);
}

.modal .cm-editor .cm-keyword {
    color: var(--modal-cm-keyword);
}

.modal .cm-editor .cm-variable {
    color: var(--modal-cm-variable);
}

.modal .cm-editor .cm-tooltip {
    background-color: var(--modal-cm-tooltip-background-color);
}

.cm-editor .valid-env-var {
    background-color: var(--valid-env-highlight-background-color);
    border-radius: 3px;
    padding: 2px 0;
    color: var(--valid-env-highlight-color);
}

.cm-editor .valid-env-var * {
    color: var(--valid-env-highlight-color) !important;
}

.cm-editor .invalid-env-var {
    background-color: var(--invalid-env-highlight-background-color);
    border-radius: 3px;
    padding: 2px 0;
    color: var(--invalid-env-highlight-color);
}

.cm-editor .invalid-env-var * {
    color: var(--invalid-env-highlight-color) !important;
}

.cm-editor .tag {
    border-radius: 3px;
    padding: 2px 4px;
    background-color: #dae1ff;
    color: black;
    cursor: pointer;
}

.cm-editor .tag:hover {
    background-color: #c4d1ff;
}

.cm-editor :not(.cm-focused) .cm-selectionBackground,
.cm-editor &.cm-focused .cm-selectionBackground {
    background-color: var(--cm-selection-background-color) !important;
}

.cm-editor .cm-cursor, .cm-editor .cm-dropCursor {
    border-color: var(--caret-color);
}

.cm-editor .cm-selectionMatch {
    background-color: var(--cm-selection-match-background-color);
}

.modal .cm-editor .valid-env-var {
    background-color: var(--modal-valid-env-highlight-background-color);
    color: var(--modal-valid-env-highlight-color);
}

.modal .cm-editor .valid-env-var * {
    color: var(--modal-valid-env-highlight-color) !important;
}

.modal .cm-editor .invalid-env-var {
    background-color: var(--modal-invalid-env-highlight-background-color);
    color: var(--modal-invalid-env-highlight-color);
}

.modal .cm-editor .invalid-env-var * {
    color: var(--modal-invalid-env-highlight-color) !important;
}

.modal .cm-editor :not(.cm-focused) .cm-selectionBackground,
.modal .cm-editor &.cm-focused .cm-selectionBackground {
    background-color: var(--modal-cm-selection-background-color);
}

.modal .cm-editor .cm-cursor, .modal .cm-editor .cm-dropCursor {
    border-color: var(--modal-caret-color);
}

.modal .cm-editor .cm-selectionMatch {
    background-color: var(--modal-cm-selection-match-background-color);
}

/* end of code mirror styles & overrides */

a {
    color: var(--link-color);
}

.modal a {
    color: var(--modal-link-color);
}

.request-panel-tabs-context select {
    border: 1px solid var(--default-border-color);
    border-radius: var(--default-border-radius);
    outline: 0;
    padding: 0.3rem;
    background: inherit;
}

.request-panel-tabs-context table {
    border-collapse: collapse;
    width: 100%;
}

.request-panel-tabs-context table th, .request-panel-tabs-context table td {
    border: 1px solid var(--default-border-color);
    padding: 0.5rem;
}

.request-panel-tabs-context table:not(.auth) td:nth-last-child(-n+2) {
    width: 29px;
}

.request-panel-tabs-context table.auth td:nth-last-child(-n+2) {
    width: 96px;
}

.request-panel-tabs-context table input {
    border: 0;
    outline: 0;
    width: 100%;
}

.request-panel-tabs-context table input[type="checkbox"] {
    width: auto;
    vertical-align: middle;
}

.request-panel-tabs-context table input:disabled {
    opacity: 0.5;
}

.request-panel-tabs-context table .disabled {
    opacity: 0.5;
}

.modal {
    --default-border-color: var(--default-border-color-modal);
}

table > tr > td[colspan="4"] {
    cursor: pointer;
}

select {
    cursor: pointer;
}

.sidebar-item {
    cursor: pointer;
}

.tag {
    background: var(--sidebar-item-active-color);
}

.tag.green {
    background: #75ba24;
    color: white;
}

.tag.yellow {
    background: #ec8702;
    color: white;
}

.tag.red {
    background: #e15251;
    color: white;
}

.custom-dropdown {
    cursor: pointer;
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
    user-select: none;
    height: 100%;
}

.custom-dropdown.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.custom-dropdown .custom-dropdown-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-dropdown i {
    padding-left: 4px;
}

.custom-select {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--default-border-color);
    border-radius: var(--default-border-radius);
    outline: 0;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: inherit;
    cursor: pointer;
}

.text-with-line::after {
    content: '';
    display: flex;
    flex-grow: 1.5;
    height: 0.05rem;
    background-color: var(--default-border-color);
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    vertical-align: center;
}

.active-script {
    color: rgba(76, 237, 39, 0.65);
    font-size: 0.6rem !important;
}

.passed-tests {
    color: rgba(76, 237, 39, 0.65);
    font-size: 0.6rem !important;
}

.failed-tests {
    color: rgb(237, 39, 39);
    font-size: 0.6rem !important;
}

.tooltip {
    position: fixed;
    z-index: 3;
    background-color: var(--modal-background-color);
    color: var(--modal-text-color);
    top: 0;
    left: 0;
    padding: 0.5em;
    border-radius: var(--default-border-radius);
    border: 1px solid var(--modal-border-color);
    box-shadow: 0 2px 4px var(--box-shadow-color);
}
